import React from 'react';
import './index.scss'
import MyForm from '../../components/MyForm';
class App extends React.Component {
  state={
    activeNav: 1,
    sendMsg: { // 寄件人
      name: '',
      phone: ''
    },
    reveiveMsg: [{id:1}] // 收件人
  }
  constructor(props) {
    super(props)
    this.saveSendMsg = this.saveSendMsg.bind(this)
    console.log('constructor')
  }
  saveSendMsg(data, id) {
    console.log('收到的数据', id, this.state.activeNav, data)
    if(this.state.activeNav === 1) {
      this.setState({
        sendMsg: data
      })
    } else if(this.state.activeNav === 2) {
      // 把数据存数组里
      this.setState(() => {
        let newReceiveMsg = this.state.reveiveMsg.map(item => {
          if(item.id === id) {
            item = Object.assign({}, item, data)
          }
          return item
        })
        return {
          reveiveMsg: newReceiveMsg
        }
      }, () => {
        console.log('最新的数据', this.state)
      })
    }
  }
  addReceiver() {
    this.setState({
      reveiveMsg: this.state.reveiveMsg.concat([{id: this.state.reveiveMsg.length + 1}])
    }, () => {
      console.log('？？？', this.state.reveiveMsg)
    })
  }
  
  render() {
    console.log('render')
    return (
        <div className="App">
          <div>
            <span style={{color: this.state.activeNav === 1 ? 'red' : '#333'}} >01寄件人信息</span>
            <span style={{color: this.state.activeNav === 2 ? 'red' : '#333'}} >02收件人信息</span>
            <span style={{color: this.state.activeNav === 3 ? 'red' : '#333'}} >03预约信息</span>
            <span style={{color: this.state.activeNav === 4 ? 'red' : '#333'}} >04完成下单</span>
          </div>
          <div className="box">
            <div className="container" style={{left: -(this.state.activeNav-1) * 980 + 'px'}}>
              <div className="step">
                <MyForm saveData={(d) => this.saveSendMsg(d)}></MyForm>
              </div>
              <div className="step">
                {
                  this.state.reveiveMsg.map((item, key) => <MyForm saveData={(d) => this.saveSendMsg(d, item.id)} key={key}></MyForm>)
                }
                <button onClick={() => this.addReceiver()}>添加收件人</button>
              </div>
              <div className="step"></div>, 
              <div className="step"></div>
            </div>
          </div>
          {
            this.state.activeNav > 1 ? <button  onClick={() => this.setState({activeNav: this.state.activeNav - 1})}>上一步</button> : null
          }
          <button onClick={() => this.setState({activeNav: this.state.activeNav + 1})}>下一步</button>
        </div>
    );
  }
  componentDidMount() {
    console.log('componentDidMount')
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextState)
    return true
  }
}
export default App;
